<template>
	<view class="MagicImg" :style="{ padding: modelData.paddingTB * 2 + 'rpx 0' }">
		<view class="type-one" v-if="imgList.length === 1">
			<u-image
				class="one-img"
				width="100%"
				:border-radius="border_radius"
				:height="height"
				:src="imgList[0].img"
				@click="goPage(imgList[0].url, imgList[0].switchTab)"
			></u-image>
		</view>
		<view class="type-two" v-if="imgList.length === 2">
			<u-image class="two-img" :border-radius="border_radius" :height="two_height" :src="imgList[0].img" @click="goPage(imgList[0].url, imgList[0].switchTab)"></u-image>
			<u-image class="two-img" :border-radius="border_radius" :height="two_height" :src="imgList[1].img" @click="goPage(imgList[0].url, imgList[1].switchTab)"></u-image>
		</view>
		<view class="type-three clearfix" v-if="imgList.length === 3">
			<u-image
				class="three-img-one float_left"
				:border-radius="border_radius"
				:height="three_one_height"
				:width="three_one_width"
				:src="imgList[0].img"
				@click="goPage(imgList[0].url, imgList[0].switchTab)"
			></u-image>
			<view class="float_right">
				<u-image
					class="three-img-two"
					:border-radius="border_radius"
					:height="three_two_h"
					:width="three_two_w"
					:src="imgList[1].img"
					@click="goPage(imgList[0].url, imgList[1].switchTab)"
				></u-image>
				<u-image
					class="three-img-two"
					:border-radius="border_radius"
					:height="three_two_h"
					:width="three_two_w"
					:src="imgList[2].img"
					@click="goPage(imgList[0].url, imgList[2].switchTab)"
				></u-image>
			</view>
		</view>
		<view class="type-three clearfix" v-if="imgList.length === 4">
			<u-image
				class="three-img-one float_left"
				:border-radius="border_radius"
				:height="three_one_height"
				:width="three_one_width"
				:src="imgList[0].img"
				@click="goPage(imgList[0].url, imgList[0].switchTab)"
			></u-image>
			<view class="float_right">
				<u-image
					class="three-img-two"
					:border-radius="border_radius"
					:height="three_two_h"
					:width="three_two_w"
					:src="imgList[1].img"
					@click="goPage(imgList[0].url, imgList[1].switchTab)"
				></u-image>
				<view class="type-four">
					<u-image
						class="three-img-two"
						:border-radius="border_radius"
						:height="three_two_h"
						:src="imgList[1].img"
						@click="goPage(imgList[0].url, imgList[1].switchTab)"
					></u-image>
					<u-image
						class="three-img-two"
						:border-radius="border_radius"
						:height="three_two_h"
						:src="imgList[2].img"
						@click="goPage(imgList[0].url, imgList[2].switchTab)"
					></u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	computed: {
		imgList() {
			return this.modelData.imagesList.map(item => {
				return {
					img: item.image.url,
					switchTab: item.switchTab,
					url: item.url
				};
			});
		}
	},
	data() {
		return {
			height: '246rpx',
			two_height: '218rpx',
			three_one_height: '392rpx',
			three_one_width: '330rpx',
			three_two_h: '192rpx',
			three_two_w: '370rpx',
			border_radius: '12rpx'
		};
	}
};
</script>

<style lang="scss">
.MagicImg {
	width: 706upx;
	margin: 0 auto;
	.type-two {
		display: flex;
		flex-wrap: wrap;
		.two-img {
			width: calc(50% - 8rpx);
			margin-bottom: 8upx;
			padding: 0 4rpx;
		}
	}
	.type-three {
		.three-img-two {
			display: block;
		}
		.three-img-two:first-child {
			margin-bottom: 8upx;
		}
		.type-four {
			display: flex;
			.three-img-two {
				flex: 2;
				&:first-child {
					padding-right: 4upx;
				}
				&:last-child {
					padding-left: 4upx;
				}
			}
		}
	}
}
</style>
